<template>
	<view>
		<view ref="ani" :animation="animationData" class="ads-box" style="padding: 6rpx;" :style="{ bottom: bottom + 'rpx', right: right + 'rpx' }" v-if="show">
			<view class="ads-image" :style="{ backgroundImage: `url(${content.img})` }">
				<!-- #ifdef APP-NVUE -->
				<image :src="content.img" class="ads-image-img"></image>
				<!-- #endif -->
			</view>
			<view class="ads-content">
				<text class="ads-content-text">{{ content.title }}</text>
			</view>
		</view>
	</view>
</template>

<script>
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
// #endif
export default {
	name: 'adsFadeInOut',
	props: {
		//持续时间
		duration: {
			type: Number,
			default: 3500
		},
		//停留时间
		wait: {
			type: Number,
			default: 6000
		},
		//底部距离rpx
		bottom: {
			type: Number,
			default: 300
		},
		//右边距离rpx
		right: {
			type: Number,
			default: 20
		},
		//动画半径
		radius: {
			type: Number,
			default: 30
		},
		//是否循环显示
		loop: {
			type: Boolean,
			default: true
		},
		//数据列表
		list: {
			type: [Array, Object],
			default: () => {
				return [];
			}
		},
		//追加数据列表
		concat: {
			type: [Array, Object],
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {
			animationData: {},
			content: [],
			show: true,
			lists: this.list
		};
	},
	mounted() {},
	watch: {
		list: {
			handler(newValue, oldValue) {
				this.lists = newValue;
				this.$nextTick(() => {
					this.init();
				});
			},
			immediate: true
		}
	},
	methods: {
		init() {
			if (this.lists.length == 0) {
				this.show = false;
				return;
			}
			this.show = true;
			let count = 0;
			this.content = this.lists[0];
			this.donghua();

			let timer = setInterval(() => {
				if (!this.loop && count >= this.lists.length - 2) clearInterval(timer);
				if (count >= this.lists.length - 1) {
					count = -1;
					this.$emit('finish', true);
				}
				if (this.lists.length > 0 && count <= this.lists.length) {
					count++;
					this.content = this.lists[count];
					this.donghua();
				}
			}, this.wait + this.duration);
		},
		donghua() {
			//进入
			// #ifndef APP-NVUE
			this.animationData = uni
				.createAnimation({
					duration: this.duration / 2,
					timingFunction: 'ease'
				})
				.bottom(uni.upx2px(this.bottom) - this.radius)
				.opacity(0.9)
				.step()
				.export();
			// #endif

			// #ifdef APP-NVUE
			if (!this.$refs['ani']) return;
			animation.transition(this.$refs['ani'].ref, {
				styles: {
					transform: `translateY(-${this.radius / 2}px)`,
					opacity: 1
				},
				duration: this.duration / 2,
				timingFunction: 'linear',
				needLayout: false,
				delay: 0
			});
			// #endif

			//停留
			setTimeout(() => {
				//消失
				// #ifndef APP-NVUE
				this.animationData = uni
					.createAnimation({
						duration: this.duration / 2,
						timingFunction: 'ease'
					})
					.bottom(uni.upx2px(this.bottom) - this.radius * 2)
					.opacity(0)
					.step()
					.export();
				// #endif

				// #ifdef APP-NVUE
				if (!this.$refs['ani']) return;
				animation.transition(this.$refs['ani'].ref, {
					styles: {
						transform: `translateY(-${this.radius * 2}px)`,
						opacity: 0
					},
					duration: this.duration / 2,
					timingFunction: 'linear',
					needLayout: false,
					delay: 0
				});
				// #endif

				//复位
				setTimeout(() => {
					// #ifndef APP-NVUE
					this.animationData = uni
						.createAnimation({
							duration: 0,
							timingFunction: 'ease'
						})
						.bottom(uni.upx2px(this.bottom))
						.opacity(0)
						.step()
						.export();
					// #endif

					// #ifdef APP-NVUE
					animation.transition(this.$refs['ani'].ref, {
						styles: {
							transform: `translateY(${this.radius / 2}px)`
						},
						duration: 0,
						timingFunction: 'linear',
						needLayout: false,
						delay: 0
					});
					// #endif
				}, this.duration / 2);
			}, this.wait);
		}
	}
};
</script>

<style scoped>
.ads-box {
	position: fixed;
	z-index: 20;
	opacity: 0;
	border-radius: 300rpx;
	/* #ifndef APP-NVUE */
	background-image: linear-gradient(45deg, #ff9700, #ed1c24);
	/* #endif */
	/* #ifdef APP-NVUE */
	background-image: linear-gradient(to bottom right, #ff9700, #ed1c24);
	/* #endif */
	color: #ffffff;
	box-shadow: 6rpx 6rpx 8rpx rgba(217, 109, 26, 0.2);
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: flex-start;
}

.ads-image {
	/* #ifndef APP-NVUE */
	font-variant: small-caps;
	display: inline-flex;
	white-space: nowrap;
	background-size: cover;
	background-position: center;
	vertical-align: middle;
	/* #endif */
	margin: 0;
	padding: 0;
	text-align: center;
	justify-content: center;
	align-items: center;
	background-color: #ccc;
	color: #ffffff;
	position: relative;
	width: 50rpx;
	height: 50rpx;
	border-radius: 50rpx;
}

/* #ifdef APP-NVUE */
.ads-image-img {
	width: 50rpx;
	height: 50rpx;
	border-radius: 50rpx;
}
/* #endif */
.ads-content {
	padding: 0 14rpx;
	display: flex;
	align-items: center;
}
.ads-content-text {
	color: #fff;
	font-size: 25rpx;
}
</style>
